import 'package:flutter/material.dart';
import 'package:flutter_syt/theme/font_styles.dart';
import 'package:flutter_syt/theme/theme_color.dart';
import 'package:flutter_syt/utils/click_utils.dart';

class FeedbackOptionEntity {
  late String name;
  late String icon;
  late int value;

  FeedbackOptionEntity();

  factory FeedbackOptionEntity.create(
    String name,
    String icon,
    int value,
  ) {
    return FeedbackOptionEntity()
      ..name = name
      ..icon = icon
      ..value = value;
  }
}

class FeedbackSelectEntity {
  late String title;
  late List<FeedbackOptionEntity> options;

  FeedbackSelectEntity();

  factory FeedbackSelectEntity.create(
    String title,
    List<FeedbackOptionEntity> options,
  ) {
    return FeedbackSelectEntity()
      ..title = title
      ..options = options;
  }
}

class FeedbackSelect extends StatefulWidget {
  final FeedbackSelectEntity entity;
  final int? defaultSelected;
  final Function(int)? onChange;

  const FeedbackSelect(this.entity, {this.onChange, this.defaultSelected});

  @override
  _FeedbackSelectState createState() => _FeedbackSelectState();
}

class _FeedbackSelectState extends State<FeedbackSelect> {
  int selected = -1;

  @override
  void initState() {
    super.initState();
    setState(() {
      selected = widget.defaultSelected ?? -1;
    });
  }

  Widget renderOption(FeedbackOptionEntity option) {
    return Container(
      width: 78,
      height: 60,
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: option.value == selected
            ? ThemeColor.primaryColor
            : Color(0xFFFAFAFA),
        borderRadius: BorderRadius.circular(8),
      ),
      child: GestureDetector(
        onTap: ClickUtils.debounce(() {
          setState(() {
            selected = option.value;
          });
          widget.onChange!(option.value);
        }),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Image.asset(
              option.icon,
              width: 24,
              height: 24,
            ),
            Text(
              option.name,
              style: FontStyles.headerTextStyle_12.copyWith(
                color: option.value == selected
                    ? ThemeColor.colorBlack100
                    : ThemeColor.colorBlack60,
                fontWeight: FontWeight.w400,
              ),
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      margin: EdgeInsets.only(top: 10.0, bottom: 10.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        // mainAxisSize: MainAxisSize.max,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            margin: EdgeInsets.only(bottom: 15.0),
            child: Text(
              widget.entity.title,
              style: FontStyles.headerTextStyle_16.copyWith(
                color: ThemeColor.colorBlack80,
                fontWeight: FontWeight.w500,
              ),
            ),
          ),
          Container(
            child: Wrap(
              spacing: 10.0,
              runSpacing: 10.0,
              // mainAxisSize: MainAxisSize.max,
              children:
                  widget.entity.options.map((e) => renderOption(e)).toList(),
            ),
          ),
        ],
      ),
    );
  }
}
